<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '组件示例',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="example-warp">
    <view class="flex flex-col text-left">
      <view class="mb-2">
        <wd-button @click="onDateTime">开始时间和结束时间的弹窗</wd-button>
      </view>
      <VTPopupimeInterval
        title="接输油臂"
        v-model:value="dateTimeValue"
        v-model:visible="dateVisible"
      />
      值:{{ dateTimeValue }}
    </view>
    <wd-divider color="#4D80F0">分割线</wd-divider>

    配合 from 组件
    <wd-form ref="form" :model="formData">
      <wd-cell-group border>
        <VFromTimeInterval
          label="首次商检"
          label-width="100px"
          placeholder="请选择"
          v-model:value="formData.dateTime"
        />
      </wd-cell-group>
    </wd-form>

    <wd-divider color="#4D80F0">分割线</wd-divider>
    通用型 picker 选择器
    <view class="mb-2">
      <wd-button @click="onGeneralPicker">通用型 picker 选择器</wd-button>
    </view>
    <VPopupGeneralPicker
      title="通用组件"
      v-model:value="generalPickerValue"
      v-model:visible="generalPickerVisible"
      :options="[
        {
          label: '测试数据1',
          value: '1',
        },
        {
          label: '测试数据2',
          value: '2',
        },
      ]"
    />

    值：{{ generalPickerValue }}

    <wd-divider color="#4D80F0">分割线</wd-divider>

    配合 from 组件
    <wd-form ref="form" :model="formData">
      <wd-cell-group border>
        <VFromItemGeneralPicker
          label="picker选择器"
          title="标题文字"
          label-width="100px"
          placeholder="请选择"
          v-model:value="formData.pickerValue"
          :options="[
            {
              label: '测试数据1',
              value: '1',
            },
            {
              label: '测试数据2',
              value: '2',
            },
          ]"
        />
      </wd-cell-group>
    </wd-form>

    <wd-divider color="#4D80F0">分割线</wd-divider>
    单个日期
    <VFromItemTimePicker
      title="单个日期"
      label="单个日期组件"
      label-width="100px"
      placeholder="请选择"
      v-model:value="dateTimeValue"
      v-model:visible="dateVisible"
    />
  </view>
</template>

<script lang="ts" setup>
import { VTPopupimeInterval, VPopupGeneralPicker } from '@/components/Popup/index'
import {
  VFromTimeInterval,
  VFromItemGeneralPicker,
  VFromItemTimePicker,
} from '@/components/Form/index'
const dateTimeValue = ref(undefined)
const dateVisible = ref(false)

const formData = ref({
  dateTime: undefined,
  pickerValue: undefined,
})
// ---------------------------------

const onDateTime = () => {
  dateVisible.value = true
}

// -----------------------------------
const generalPickerVisible = ref(false)
const generalPickerValue = ref('1')
const onGeneralPicker = () => {
  generalPickerVisible.value = true
}
</script>

<style lang="scss" scoped>
.example-warp {
  display: flex;
  flex-direction: column;
}
//
</style>
